<template>
	<view class="m-radio radio-group" :class="{'x-f': flexRow}">
		<view v-for="(item, index) in options" :key="index" class="radio-item"
			:style="{'margin': margin, 'width': setWidth}" @tap="selectItem(index)">
			<m-badge :count="item.count ? item.count : null" :position="badgePosition" style="width: 100%;">
				<view class="radio-icon" :class="{ 
            'radio-icon-selected': value === (formtDataIsEmpty ? index : item[formtData.hidKey]), 
            'radio-icon-circle': shape === 'circle', 
            'radio-icon-square': shape === 'square' 
          }" :style="{ 
            backgroundColor: value === (formtDataIsEmpty ? index : item[formtData.hidKey]) 
              ? item.contentActiveColor || contentActiveColor 
              : InitBackgroundColor,
            border: value === (formtDataIsEmpty ? index : item[formtData.hidKey])
              ? `1px solid ${item.color}` 
              : 'none',
            borderRadius: borderRadius,
            height: itemHeight,
            padding: padding
          }">
					<slot name="content" :item="item">
						<u-icon v-if="item.TextIcon" :name="item.TextIcon" :color="value === (formtDataIsEmpty ? index : item[formtData.hidKey])
                ? item.color || contentActiveTextColor
                : contentInitTextColor" size="18"></u-icon>
						<text :style="{ 
                color: value === (formtDataIsEmpty ? index : item[formtData.hidKey])
                  ? item.color || contentActiveTextColor
                  : contentInitTextColor,
                fontSize: fontSize 
              }">
							{{ formtDataIsEmpty ? item.content : item[formtData.showText] }}
						</text>
					</slot>
				</view>
			</m-badge>
		</view>
	</view>
</template>

<script setup lang="ts" name="m-radio">
	import { computed } from 'vue';
	import { Utils } from '../../libs/util/utils'

	// 定义Props类型
	interface FormtData {
		showText ?: string;
		hidKey ?: string;
	}

	interface BadgePosition {
		top : string;
		right : string;
	}

	interface RadioOption {
		content ?: string;
		count ?: number | string;
		TextIcon ?: string;
		color ?: string;
		contentActiveColor ?: string;
		[key : string] : any; // 允许其他自定义属性
	}

	const props = defineProps<{
		options : RadioOption[];
		shape ?: '' | 'circle' | 'square';
		InitBackgroundColor ?: string;
		contentInitTextColor ?: string;
		contentActiveColor ?: string;
		contentActiveTextColor ?: string;
		TextIcon ?: string;
		value ?: number | string;
		margin ?: string;
		padding ?: string;
		borderRadius ?: string;
		flexRow ?: boolean;
		fontSize ?: string;
		itemHeight ?: string;
		setWidth ?: string;
		formtData ?: FormtData;
		badgePosition ?: BadgePosition;
	}>();

	// 定义默认值
	const defaultFormtData : FormtData = {
		showText: 'content',
		hidKey: 'value'
	};

	const defaultBadgePosition : BadgePosition = {
		top: '-4px',
		right: '-4px'
	};

	// 计算属性
	const formtDataIsEmpty = computed(() => {
		return Utils.isEmpty(props.formtData)
	});

	// 处理事件
	const emit = defineEmits<{
		(e : 'change', data : { data : RadioOption; Index : number }) : void;
	}>();

	const selectItem = (index : number) => {
		emit('change', {
			data: props.options[index],
			Index: index
		});
	};
</script>

<style lang="scss" scoped>
	.radio-group {
		width: 100%;
	}

	.radio-item {}

	.radio-icon {
		flex: 1;
		width: 100%;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.radio-icon-circle {}

	.radio-icon-square {
		min-width: 80px;
		/* 可自定义形状 */
	}

	.radio-icon-selected {
		color: #fff;
		/* 可自定义选框内容颜色 */
	}
</style>